<template>
  <div class="plan">
    <el-button @click="onAdd">添加</el-button>
    <el-table
      :data="data"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="size"
        label="类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="path"
        label="图片">
      </el-table-column>
      <el-table-column
        label="操作"
        align="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="onEdit(scope.$index,scope.row)">编辑
          </el-button>
          <!--<el-button-->
          <!--size="mini"-->
          <!--type="danger"-->
          <!--@click="onDel(scope.row)">Delete-->
          <!--</el-button>-->
        </template>
      </el-table-column>
    </el-table>


    <el-dialog :title="isEdit?'编辑':'创建'" :visible.sync="editShow">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <template v-if="form.path">
            <img @click="onPick" :src="form.path" alt="" style="min-width: 25px;min-height: 25px">
          </template>
          <template v-else>
            <el-button @click="onPick">选择图片</el-button>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{isEdit?'编辑':'创建'}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <pre-single-image v-if="pickShow" :show.sync="pickShow" :fixedNumber="fixedNumber"
                      @success="pickSucc"></pre-single-image>
  </div>
</template>

<script>
  import Plan from '@/api/plan'
  import preSingleImage from '@/components/Upload/preSingleImage'

  export default {
    name: "plan",
    components: {preSingleImage},
    data() {
      return {
        data: [],
        pickShow: false,
        fixedNumber: [1, 1],
        editShow: false,
        form: {},
        isEdit: true
      }
    },
    methods: {
      onDel(row) {
        Plan.del(row.id).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.getData()
        })
      },
      onEdit(index, row) {
        this.form = row
        this.isEdit = true
        var fixedNumber = []
        this.fixedNumber = this.getFixed(index + 1)
        this.editShow = true
      },
      onSubmit() {
        if (!this.form.id) {
          //创建
          if (this.data.length >= 6) {
            this.$message("不能超过6个")
            return
          }
          Plan.add(this.form).then(res => {
            if (res.data.succ) {
              this.$message({
                message: '创建成功',
                type: 'success'
              });
            }
            this.getData()
          })
        } else {
          Plan.update(this.form).then(res => {
            if (res.data.succ) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
            }
            this.getData()
          })
        }
      },
      pickSucc(i) {
        this.form.path = i.path
      },
      onPick() {
        this.pickShow = true
      },
      onAdd() {
        if (this.data.length >= 6) {
          this.$message("不能超过6个")
          return
        }
        this.form = {}
        this.idEdit = false
        var fixedNumber = []
        this.fixedNumber = this.getFixed(this.data.length + 1)
        this.editShow = true
      },
      getData() {
        Plan.list().then(res => {
          this.data = res.data.data
        })
      },
      getFixed(i) {
        var fixedNumber = []
        switch (i) {
          case 1:
            fixedNumber = [2, 2]
            break
          case 2:
          case 3:
          case 4:
          case 5:
            fixedNumber = [2, 1]
            break
          case 6:
            fixedNumber = [4, 1]
            break
          case 7:
            return
        }
        return fixedNumber
      }
    },
    created() {
      this.getData()
    }
  }
</script>

<style scoped>
  .plan {
    padding: 10px;
  }
</style>
